React Flow 绘制可拖拽流程图

您所在的位置：网站首页 › react 画布 › React Flow 绘制可拖拽流程图

React Flow 绘制可拖拽流程图

2023-08-27 01:55| 来源: 网络整理| 查看: 265

React hooks 项目中使用React Flow实现拖拽流程图

最近项目需求需要实现一个自定义流程图查了下资料加上大神推荐最终选用React Flow 最开始写demo的时候是9.5的版本后来官方api升级到10.0 用法改变了很多参考着api修改升级后性能提升很多

安装 npm install react-flow-renderer 使用

ReactFlow Api

按照官方demo 实现拖拽功能

index.tsx

const ReactFlowDemo: React.FC = () => { const reactFlowWrapper = useRef(null); const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [reactFlowInstance, setReactFlowInstance] = useState(null); const onConnect = useCallback((params) => setEdges((eds) => addEdge({ ...params, markerEnd: { type: MarkerType.Arrow } }, eds)), []); const onDragOver = useCallback((event) => { event.preventDefault(); event.dataTransfer.dropEffect = 'move'; }, []); const onDrop = (event: React.DragEvent) => { event.preventDefault(); const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect(); const type = event?.dataTransfer.getData('application/reactflow'); if (typeof type === 'undefined' || !type) { return; } const position = reactFlowInstance.project({ x: event.clientX - reactFlowBounds.left, y: event.clientY - reactFlowBounds.top, }); let newNode = { id: getId(), type: type, position, data: { label: `${type} node` }, }; setNodes((es) => es.concat(newNode)); } const onNodeClick = (event: React.MouseEvent, node: Node) => { let { data, id } = node console.log("element>>", node) }; useEffect(() => { }, []) return ( ) }

Sidebar.tsx

const Sidebar: React.FC = (props) => { // 获取画布上的节点 const onDragStart = (evt: React.DragEvent, nodeType: string) => { // 记录被拖拽的节点类型 evt.dataTransfer.setData('application/reactflow', nodeType); evt.dataTransfer.effectAllowed = 'move'; }; return ( onDragStart(event, 'input')} draggable> Input Node onDragStart(event, 'default')} draggable> Default Node onDragStart(event, 'output')} draggable> Output Node ); }

nodes和edges是节点和线的对象数组

node：

- id: string 唯一标识，用于连线

- position: { x: number, y: number } 定位信息

- type: string 定义节点的类型

- data: {} 传入节点内的数据

自定义节点的话修改type就可以

edge:

- id: string 唯一标识，必填

- source: string 连线的起始节点的 id

- target: string 连线的结束节点的 id

- type: string 线的类型

线的类型有曲线、直线、折线等

拓展

使用中节点类型可能不满足目前要求可以自定义类型节点的形状、颜色、选中状态都可以自己调整

index.tsx

const nodeTypes = { floating: FloatingNode, };

Sidebar.tsx

onDragStart(event, 'input')} draggable> Input Node onDragStart(event, 'default')} draggable> Default Node onDragStart(event, 'output')} draggable> Output Node onDragStart(event, 'floating')} draggable> Floating Node

FloatingNode.tsx

export default memo((node: Node) => { const { data: { label } } = node return ( {label} ); })

【本文地址】

React Flow 绘制可拖拽流程图

React Flow 绘制可拖拽流程图

今日新闻

推荐新闻